<!-- components/custom-payment/custom-payment.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'

	// 在线支付弹层
	const paymentPopup = ref()

	// 打开弹层
	const open = () => {
		paymentPopup.value.open()
	}
	// 关闭弹层
	const close = () => {
		paymentPopup.value.close()
	}

	// 开放关闭和显示弹层的方法
	defineExpose({ open, close })

	//订单Id 和总价
	//父-> 子
	const props = defineProps<{ orderId: string; amount: string }>()

	//子-> 父
	const emits = defineEmits<{ (e: 'close'): void; (e: 'confirm', payType: number): void }>()

	//支付方式的索引
	const payIndex = ref(0)
	//支付的列表
	const payList = [
		{ title: '支付宝支付', icon: '/static/images/alipay-icon.png' },
		{
			title: '微信支付',
			icon: '/static/images/wechatpay-icon.png',
		},
	]

	//点击修改下标
	const changeIndex = (index) => {
		payIndex.value = index
	}
</script>
<template>
	<uni-popup :is-mask-click="false" ref="paymentPopup" type="bottom">
		<view class="payment-container">
			<view class="payment-header">
				<text class="title">选择支付方式</text>
				<uni-icons
					@tap="$emit('close')"
					class="uni-icons-close"
					size="18"
					color="#333"
					type="closeempty"
				/>
			</view>
			<view class="order-amount">¥ {{ props.amount }} </view>
			<uni-list :border="false">
				<uni-list-item
					v-for="(item, index) in payList"
					:key="index"
					:title="item.title"
					:thumb="item.icon"
					clickable
					@tap="changeIndex(index)"
				>
					<template #footer>
						<radio :checked="payIndex === index" color="#16C2A3" />
					</template>
				</uni-list-item>
			</uni-list>
			<button @tap="$emit('confirm', payIndex)" class="uni-button">立即支付</button>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	.payment-container {
		min-height: 400rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		padding: 10rpx 30rpx 40rpx;

		.payment-header {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333;
			position: relative;
		}

		.uni-icons-close {
			position: absolute;
			top: 2rpx;
			right: 0;
		}

		.order-amount {
			padding: 10rpx 0 10rpx;
			text-align: center;
			font-size: 40rpx;
			color: #333;
		}

		:deep(.uni-list-item__container) {
			padding: 40rpx 0 !important;
		}

		:deep(.uni-list-item--hover) {
			background-color: #fff !important;
		}

		:deep(.uni-list-item__icon) {
			margin-right: 0;
		}

		.uni-button {
			margin-top: 40rpx;
		}
	}
</style>
